useSelector এবং useDispatch হুক ব্যবহার করা

React-Redux লাইব্রেরি ব্যবহার করার সময় useSelector এবং useDispatch হুক দুটি খুবই গুরুত্বপূর্ণ টুল। এগুলো Redux স্টেটের সাথে ইন্টারঅ্যাক্ট করার জন্য ব্যবহৃত হয় এবং সাধারণ React কোডের সাথে Redux স্টেট ব্যবস্থাপনা সহজ করে তোলে। এই হুকগুলির মাধ্যমে আমরা Redux স্টোরের স্টেট অ্যাক্সেস করতে পারি এবং ডিসপ্যাচ একশন (actions) করতে পারি।

useSelector হুক

useSelector হুক ব্যবহার করে আপনি Redux স্টোরের স্টেট থেকে নির্দিষ্ট ডেটা সংগ্রহ করতে পারেন। এটি একটি selector function নেয় যা স্টেট থেকে প্রয়োজনীয় ডেটা রিটার্ন করে। useSelector হুক প্রতিবার স্টেট পরিবর্তিত হলে রি-রেন্ডার হয়।

Sintax:

const data = useSelector((state) => state.someReducer.someData);

এখানে:

• state হলো পুরো Redux স্টোরের স্টেট।
• someReducer হলো স্টোরের মধ্যে একটি নির্দিষ্ট রিডিউসার (যা আমরা সংজ্ঞায়িত করেছি)।
• someData হলো সেই রিডিউসারের মধ্যে থাকা ডেটা যা আমরা অ্যাক্সেস করতে চাই।

উদাহরণ:

import React from 'react';
import { useSelector } from 'react-redux';

function TodoList() {
  // Redux স্টোর থেকে todos স্টেট নেয়া
  const todos = useSelector(state => state.todos);

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

export default TodoList;

এখানে:

• useSelector হুকের মাধ্যমে state.todos থেকে টুডো তালিকা নেয়া হচ্ছে এবং তা UI-তে প্রদর্শন করা হচ্ছে।
• যখন todos স্টেটে কোনো পরিবর্তন হবে, তখন কম্পোনেন্টটি আবার রি-রেন্ডার হবে।

useDispatch হুক

useDispatch হুক ব্যবহার করে আপনি Redux স্টোরে একশন (actions) পাঠাতে পারেন। এটি ডিসপ্যাচ (dispatch) ফাংশন রিটার্ন করে, যার মাধ্যমে আপনি একশন ক্রিয়েটর কল করতে পারেন এবং স্টোরের স্টেট পরিবর্তন করতে পারেন।

Sintax:

const dispatch = useDispatch();
dispatch(action);

এখানে:

• dispatch হলো Redux স্টোরের মাধ্যমে একশন পাঠানোর ফাংশন।
• action হলো কোনো একশন যেটি আপনি ডিসপ্যাচ করতে চান।

উদাহরণ:

import React from 'react';
import { useDispatch } from 'react-redux';
import { addTodo } from './todoSlice';

function TodoForm() {
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    const newTodo = {
      id: Date.now(),
      title: 'New Todo'
    };
    dispatch(addTodo(newTodo));  // addTodo একশন ডিসপ্যাচ করা
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Add Todo</button>
    </form>
  );
}

export default TodoForm;

এখানে:

• useDispatch হুক ব্যবহার করে dispatch ফাংশন নেয়া হয়েছে।
• handleSubmit ফাংশনে, একটি নতুন টুডো আইটেম তৈরি করে addTodo একশন ডিসপ্যাচ করা হয়েছে, যাতে স্টোরে টুডো যোগ করা যায়।

useSelector এবং useDispatch একসাথে ব্যবহার

আপনি useSelector এবং useDispatch একসাথে ব্যবহার করতে পারেন যাতে Redux স্টোর থেকে ডেটা নিয়ে আসা এবং স্টোরে একশন পাঠানো একসাথে করা যায়।

উদাহরণ:

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTodo, removeTodo } from './todoSlice';

function TodoApp() {
  const [newTodo, setNewTodo] = useState('');
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = () => {
    if (newTodo.trim()) {
      const todo = {
        id: Date.now(),
        title: newTodo
      };
      dispatch(addTodo(todo));
      setNewTodo('');
    }
  };

  const handleRemoveTodo = (id) => {
    dispatch(removeTodo(id));
  };

  return (
    <div>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.title} 
            <button onClick={() => handleRemoveTodo(todo.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

এখানে:

• useSelector ব্যবহার করে Redux স্টোর থেকে todos তালিকা নেয়া হয়েছে।
• useDispatch ব্যবহার করে addTodo এবং removeTodo একশন ডিসপ্যাচ করা হয়েছে।

সারাংশ

• useSelector: Redux স্টোর থেকে ডেটা রিটার্ন করে এবং স্টেট পরিবর্তন হলে কম্পোনেন্টটি রি-রেন্ডার হয়।
• useDispatch: Redux স্টোরে একশন পাঠানোর জন্য ব্যবহৃত হয়। এটি ডিসপ্যাচ ফাংশন প্রদান করে যা একশন ক্রিয়েটর কল করতে সাহায্য করে।

এই দুটি হুক ব্যবহার করলে Redux স্টোরের সাথে React কম্পোনেন্ট ইন্টারঅ্যাক্ট করা আরও সহজ এবং পরিষ্কার হয়।